<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title222</title>
    <link rel="stylesheet" href="css/calendar.css">
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="js/date.js"></script>
    <script type="text/javascript" src="js/calendar.js"></script>
</head>
<body>
<div class="riqi-temple1">
    <input type="text" id="date" class="setDate">
    <div id="showDate"></div>
</div>
<div class="riqi-temple2">
    <input type="text" id="date2" class="setDate">
    <div id="showDate2"></div>
</div>
<style type="text/css">
    .riqi-temple1 {
        float: left;
        width: 500px;
        display: inline-block;
    }

    ul, ol {
        margin: 0px;
        padding: 0px;
        list-style: none;
    }

    #showDate, #showDate2 {
        top: 50px !important;
    }
</style>
<script type="text/javascript">
    $('#showDate').calendar({//div的id
        trigger: '#date',//input的id
        // zIndex: 999,
        format: 'yyyy-mm',
        view: 'month',//month：默认显示月份，date：显示日期
        onSelected: function (view, date, data) {
            // debugger;
            if (view == 'month') {
                $.noop
            }
            // console.log('event: onSelected')
        },
        onClose: function (view, date, data) {
            let _time = date.pattern("yyyy-MM");
            console.log(_time);
        }
    });
    $('#showDate2').calendar({//div的id
        trigger: '#date2',//input的id
        // zIndex: 999,
        format: 'yyyy-mm-dd',
        // view: 'month',//month：默认显示月份，date：显示日期
        onSelected: function (view, date, data) {
            // debugger;
            if (view == 'month') {
                $.noop
            }
            // console.log('event: onSelected')
        },
        onClose: function (view, date, data) {
            let _time = date.pattern("yyyy-MM-dd");
            console.log(_time);
        }
    });
</script>
</body>
</html>